<template>
  <div>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" style="height:350px"><img
              class="data1" style
              src="https://image.hongbeibang.com/Fi7YHa1lxFhnQngPLgcSQkYhd35m?640X900&imageView2/1/w/640/h/896"
          />
          <p class="data2">2款造型健康油条（家用版/商用版)</p>
        </div>
        
        <div class="swiper-slide"><img
              class="data1"
              src="https://image.hongbeibang.com/FqaKKpYA46UdFxQpRx9OeJPCIZ_y?640X900&imageView2/1/w/640/h/896"
          />
          <p class="data2">3款纯手工脆皮火腿肠（玉米味/黑椒味/烧烤味）</p>
        </div>
        <div class="swiper-slide"><img
              class="data1"
              src="https://image.hongbeibang.com/FgyQc6po7ijTS5HZzlgNG5MidcPN?640X900&imageView2/1/w/640/h/896"
          />
          <p class="data2">3款无糖无油全麦吐司（50%版/100%版/100%强化版）</p>
        </div>
        <div class="swiper-slide"><img
              class="data1"
              src="https://image.hongbeibang.com/Fo259rn0a2Km1LOMlobVHyXV_dw7?640X900&imageView2/1/w/640/h/896"
          />
          <p class="data2">极致柔软！3款完美口感的拉丝吐司（南瓜/抹茶/黑芝麻）</p>
        </div>
        <div class="swiper-slide"><img
              class="data1"
              src="https://image.hongbeibang.com/Fqj9HFB5DNvlzAKcVsfSzD6uLseK?640X900&imageView2/1/w/640/h/896"
          />
          <p class="data2">3款卷不裂的蛋糕卷（黑糖红枣/紫芋椰香/香浓栗子</p>
        </div>
        <div class="swiper-slide"><img
              class="data1"
              src="https://image.hongbeibang.com/Fm3jjEY8vfHbpnJKWKdrgzwYfqcO?640X900&imageView2/1/w/640/h/896"
          />
          <p class="data2">5款店售王牌调理面包（肠仔包/汉堡/肉松/火腿芝士）</p>
        </div>
        <div class="swiper-slide"><img
              class="data1"
              src="https://image.hongbeibang.com/FqpjKukL85YXSUGljH9VEzQqOYxA?640X900&imageView2/1/w/640/h/896"
          />
          <p class="data2">4款夹馅奶酥吐司（黑糖麻薯/南瓜芝士/芋泥蛋黄/巧克力）</p>
        </div>
        <div class="swiper-slide"><img
              class="data1"
              src="https://image.hongbeibang.com/Fr5XTmGhSZFfe6x-QZY_uQHM4yJ4?640X900&imageView2/1/w/640/h/896"
          />
          <p class="data2">7款超馋嘴三明治（含：低糖高纤全麦吐司做法）</p>
        </div>
        <div class="swiper-slide"><img
              class="data1"
              src="https://image.hongbeibang.com/FlTvm6JsSzp043FfX-7y-2t-klos?640X900&imageView2/1/w/640/h/896"
          />
          <p class="data2">5款健康养生发糕（红糖/黑芝麻/菠菜/紫薯/大理石）</p>
        </div>
        <div class="swiper-slide"><img
              class="data1"
              src="https://image.hongbeibang.com/FrhjOZG1elLUFRoz2iXktHCy33iu?640X900&imageView2/1/w/640/h/896"
          />
          <p class="data2">皮薄汁多馅料美：秒杀狗不理包子的「完美灌汤包」</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "../../src/assets/css/swiper-bundle.css";
export default {
  data() {
    return {
      mySwiper: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.mySwiper = new Swiper(".swiper-container", {
        // direction: 'vertical', // 垂直切换选项
        loop: false, // 循环模式选项
        slidesPerView:2,

        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
        },

        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },

        // 如果需要滚动条
        scrollbar: {
          el: ".swiper-scrollbar",
        },
      });
    });
  },
};
</script>

<style lang="scss" scoped>
 html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper-container {
      width: 100%;
    //   height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      height: 350px;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
    //   display: -webkit-flex;
    //   display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
.swiper-slide{
  width: 100%;
  height: 287px;
}
.data1 {
    width:176.64px;
    height: 284.4px;
  }
  .data2{
      font-size: 15px;
      color: #4A4945;
      font-weight: bold;
  }
</style>
